<template>
	<z-nav-bar title="一对一解答"></z-nav-bar>
	<view class="top-tabs flex_fsc">
		<view
			class="item"
			:style="{ color: tabIndex === 0 ? '#1A2233' : ' #909399', 'font-weight': tabIndex === 0 ? 700 : 400 }"
			@click="switchTab(0)"
		>
			全部
		</view>
		<view
			class="item"
			:style="{ color: tabIndex === 1 ? '#1A2233' : ' #909399', 'font-weight': tabIndex === 1 ? 700 : 400 }"
			@click="switchTab(1)"
		>
			待解答
		</view>
		<view
			class="item"
			:style="{ color: tabIndex === 2 ? '#1A2233' : ' #909399', 'font-weight': tabIndex === 2 ? 700 : 400 }"
			@click="switchTab(2)"
		>
			未解答
		</view>
		<view class="bottom-line" :style="{ left: left + 'rpx' }"></view>
	</view>
	<view v-if="pageData.list.length" class="sv">
		<view class="item" v-for="(item, index) in pageData.list" :key="item.id">
			<view class="flex_sbc">
				<view class="flex_fsc">
					<image :src="setting.oss_pub_domain + '/app-img/my/help.png'" class="icon-size uni-mr-12"></image>
					<view class="z-font-32 text-w u-line-1" style="width: 480rpx">{{ item.title }}</view>
				</view>
				<view v-if="item.status" class="z-font-24 color-C4C7CC">已解答</view>
				<view v-else class="z-font-24 uni-orange">未解答</view>
			</view>
			<view class="line-spacing uni-mt-30"></view>
			<view class="uni-mt-32 flex_fsc">
				<image :src="setting.oss_pub_domain + item.studentAva" class="user-img"></image>
				<view>
					<view class="text-w">{{ item.studentName }}</view>
					<view class="z-font-24 uni-color-grey uni-mt-16">{{ item.achInfo }}</view>
					<view class="uni-585C66 uni-mt-20">{{ item.field }}</view>
					<view class="uni-585C66 uni-mt-20">{{ item.phenomenon }}</view>
				</view>
			</view>
			<view class="flex_sbc uni-mt-32">
				<view class="color-C4C7CC">{{ item.createTime }}</view>
				<view class="flex_fsc">
					<view class="button un" @click="delOne(index)">删除问题</view>
					<navigator :url="'/uni_modules/uni-im/pages/chat/chat?conversation_id=group_' + item.chatGroup" class="button ac">{{ item.status ? '查看详情' : '解答问诊' }}</navigator>
				</view>
			</view>
		</view>
	</view>
	<z-no-data v-else placeholder="暂无问题" width="400"></z-no-data>
</template>

<script setup>
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { getOneToOne, delOneToOne } from '@/api/my';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();
const tabIndex = ref(0),
	left = ref(110),
	contentTop = ref(0);
function switchTab(index) {
	const leftItem = [110, 360, 610];
	if (tabIndex.value === index) return;
	tabIndex.value = index;
	left.value = leftItem[index];
	pageData.pageNum = 1
	fetchData()
}
function changTabIndex(e) {
	switchTab(e.detail.current);
}

onMounted(() => {
	uni.createSelectorQuery()
		.select('.top-tabs')
		.boundingClientRect((data) => {
			contentTop.value = data.bottom;
		})
		.exec();
});

const pageData = reactive({
	total: 0,
	list: [],
	pageSize: 10,
	pageNum: 1
});
fetchData();
function fetchData() {
	const param = {
		pageSize: pageData.pageSize,
		pageNum: pageData.pageNum
	};
	tabIndex.value === 1 ? (param.status = 1) : tabIndex.value == 2 ? (param.status = 0) : '';
	getOneToOne(param).then((res) => {
		res.rows.forEach(item => {
			const tmp = item.description.split(',')
			item.field = tmp[0]
			item.phenomenon = tmp[1]
		})
		if (pageData.pageNum === 1) pageData.list = res.rows;
		else pageData.list.push(...res.rows);
		pageData.total = res.total;
		uni.stopPullDownRefresh();
	});
}

onPullDownRefresh(() => {
	pageData.pageNum = 1;
	fetchData();
});

onReachBottom(() => {
	if (pageData.list.length >= pageData.total) return;
	pageData.pageNum += 1;
	fetchData();
});

function delOne(index) {
	uni.showModal({
		title: '删除确认',
		content: '确定要删除改问题吗？',
		success: (e) => {
			if (e.confirm) {
				delOneToOne(pageData.list[index].id).then((res) => {
					that.tools.alert('问题已删除');
					pageData.list.splice(index, 1);
				});
			}
		}
	});
}
</script>

<style lang="scss">
page {
	background: $uni-F5F5F5;
}
</style>
<style lang="scss" scoped>
@import 'one-to-one.scss';
</style>
